<template>
  <div v-window-resize>
    <!-- 正常 -->
    <div v-if="pagePath[0] !== 'login'"  class="page-main">
      <div class="w-100 h-100 d-flex-column justify-content-between">
        <nav
          class="nav-bar d-flex-row align-items-center justify-content-between flex-shrink-0 w-100 bg-blue"
        >
          <i @click="goBack" :style="{opacity: showBack ? '1':'0'}" class="back-icon icon"></i>
          <span class="title">{{ viewTitle() }}</span>
          <i class="more-icon icon" style="opacity: 0;"></i>
        </nav>
        <div class="w-100 h-100 bg--d-gray">
          <div :style="{'padding-bottom': showTableBar ? '4rem':'0rem'}" class="page-content w-100 h-100 bg-gray">
            <!-- <a-locale-provider :locale="locale"> -->
            <div v-if="isLogin" class="w-100 h-100">
              <nuxt />
            </div>
            <!-- </a-locale-provider> -->
          </div>
        </div>
        <div
          v-show="showTableBar"
          class="table-bar p-l-24 p-r-24 d-flex-row align-items-center justify-content-between flex-shrink-0"
        >
          <nuxt-link to="/score">
            <div
              :style="{color: tableBar.score ? '#1890ff':'#999'}"
              class="d-flex-column align-items-center"
            >
              <svg
                :fill="tableBar.score ? '#1890ff':'#999'"
                t="1576499896209"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1265"
              >
                <path
                  d="M240.1536 934.540288c11.133952 7.635968 24.193024 11.515904 37.266432 11.515904 10.778624 0 21.543936-2.609152 31.296512-7.840768l203.25888-109.463552 203.298816 109.463552c9.781248 5.231616 20.559872 7.840768 31.296512 7.840768 13.060096 0 26.120192-3.879936 37.29408-11.515904 20.190208-13.947904 30.518272-37.854208 26.474496-61.70624l-39.616512-236.632064 170.909696-170.662912c16.925696-16.831488 22.718464-41.529344 15.012864-63.960064-7.732224-22.38976-27.6224-38.742016-51.56864-42.320896l-233.148416-34.684928L570.566656 114.184192c-10.628096-22.10304-33.46944-36.242432-58.591232-36.242432-25.039872 0-47.894528 14.139392-58.563584 36.242432l-101.336064 210.388992-233.160704 34.684928c-23.960576 3.57888-43.850752 19.931136-51.569664 42.320896-7.704576 22.43072-1.870848 47.128576 15.040512 63.960064l170.841088 170.662912-39.6288 236.632064C209.60768 896.68608 219.921408 920.592384 240.1536 934.540288zM118.477824 421.960704l232.410112-34.521088 40.887296-6.0928 17.949696-37.21216 102.264832-212.041728 102.250496 212.041728 17.964032 37.21216 40.887296 6.0928 232.410112 34.521088L736.012288 591.026176l-28.469248 28.40064 6.626304 39.629824 39.602176 236.193792L548.95616 785.091584l-37.008384-19.9168-37.006336 19.9168L270.12608 895.292416l39.602176-236.234752 6.626304-39.629824-28.470272-28.40064L118.477824 421.960704z"
                  p-id="1266"
                />
              </svg>
              <span>打分</span>
            </div>
          </nuxt-link>
          <nuxt-link to="/about">
            <div
              :style="{color: tableBar.about ? '#1890ff':'#999'}"
              class="d-flex-column align-items-center"
            >
              <svg
                :fill="tableBar.about ? '#1890ff':'#999'"
                t="1576500123119"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="16796"
              >
                <path
                  d="M186.181818 837.818182l325.818182 0 0 46.545455-325.818182 0 0-46.545455ZM837.818182 837.818182 837.818182 884.363636 930.909091 884.363636 930.909091 0 232.727273 0 232.727273 93.090909 279.272727 93.090909 279.272727 46.545455 884.363636 46.545455 884.363636 837.818182ZM186.181818 698.181818l512 0 0 46.545455-512 0 0-46.545455ZM93.090909 149.410909l0 864.814545C93.090909 1019.624727 97.373091 1024 102.679273 1024l678.958545 0C786.990545 1024 791.272727 1019.671273 791.272727 1014.225455L791.272727 149.410909C791.272727 144.011636 786.990545 139.636364 781.684364 139.636364L102.679273 139.636364C97.373091 139.636364 93.090909 143.965091 93.090909 149.410909zM139.636364 186.181818l605.090909 0 0 791.272727L139.636364 977.454545 139.636364 186.181818zM186.181818 279.272727l512 0 0 46.545455-512 0 0-46.545455ZM186.181818 418.909091l512 0 0 46.545455-512 0 0-46.545455ZM186.181818 558.545455l512 0 0 46.545455-512 0 0-46.545455Z"
                  p-id="16797"
                />
              </svg>
              <span>关于</span>
            </div>
          </nuxt-link>
          <nuxt-link to="/mine">
            <div
              :style="{color: tableBar.mine ? '#1890ff':'#999'}"
              class="d-flex-column align-items-center"
            >
              <svg
                :fill="tableBar.mine ? '#1890ff':'#999'"
                t="1576500488397"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="41452"
              >
                <path
                  d="M794.013467 384.882857c0-153.890926-126.252449-278.616602-282.010909-278.616602-155.7646 0-282.011932 124.726699-282.011932 278.616602 0 88.858794 42.24515 167.803797 107.793028 218.813564-117.542066 59.19724-200.277396 177.063695-209.441103 314.038346l42.180681 0c9.893324-128.268362 93.130074-241.833861 209.293747-286.98213 36.910655 17.539468 88.484264 32.745798 132.185578 32.745798 43.700291 0 84.918042-10.102079 121.831766-27.637454l28.931936-16.769942 23.431665-15.394618C751.773434 552.686654 794.013467 473.741651 794.013467 384.882857L794.013467 384.882857zM512.002558 618.10969c-130.394792 0-236.083903-104.420211-236.083903-233.246275 0-128.790248 105.689111-233.228879 236.083903-233.228879 130.389676 0 236.102323 104.437607 236.102323 233.228879C748.103858 513.690502 647.628492 618.10969 512.002558 618.10969L512.002558 618.10969zM750.582305 644.6256l-0.205685 0.293689c-4.604878-4.3951-10.750855-7.16212-17.622356-7.16212-14.184047 0-25.662473 5.393847-25.662473 19.573801 0 9.78997 5.661953 17.997909 13.703093 22.321378l-0.169869 0.252757c77.113285 55.109132 116.003014 138.553613 123.668601 237.82864l51.362808 0C888.283504 807.459199 833.150836 709.269899 750.582305 644.6256L750.582305 644.6256zM750.582305 644.6256"
                  p-id="41453"
                />
              </svg>
              <span>我的</span>
            </div>
          </nuxt-link>
        </div>
      </div>
    </div>

    <!-- 登录 -->
    <div v-if="pagePath[0] === 'login'" class="w-100vw h-100vh">
      <!-- <a-locale-provider :locale="locale"> -->
      <div class="w-100 h-100">
        <nuxt />
      </div>
      <!-- </a-locale-provider> -->
    </div>
  </div>
</template>

<style lang="less" scoped>
.page-content {
  padding-top: 2rem;
  padding-bottom: 4rem;
}
.nav-bar {
  position: fixed;
  top: 0rem;
  left: 0rem;
  z-index: 9999;
  padding: 0.25rem 0.65rem;
  color: #fff;
  font-size: 1.2rem;

  .icon {
    width: 1.2rem;
    height: 1.2rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
  }
  .back-icon {
    background-image: url("~assets/back.svg");
  }
  .more-icon {
    background-image: url("~assets/more.svg");
  }
}
.table-bar {
  position: fixed;
  bottom: 0rem;
  left: 0rem;
  z-index: 9999;
  width: 100%;
  height: 4rem;
  padding: 0rem 4.6rem;
  background-color: #fff;
  svg {
    width: 1.75rem;
    height: 1.75rem;
    transition: all 0.2s ease-in-out;
  }
}
</style>

<script>
import { pathMap } from "@/pathMap";
import { saveApp } from "@/plugins/AppInstance";
import { gFunc } from "@/plugins/gFunc";
import mMenu from "~/components/mMenu";
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";

export default {
  components: {
    mMenu
  },
  data() {
    return {
      locale: zhCN,
      isLogin: true,
      pagePath: [],
      showMenuList: false,
      navigation: "",
      /**
       * 头部菜单指示器
       * @property [menuList.index]: {left: '0px', right: '0px'}
       */
      indicator: 0,
      pathMap: pathMap,
      menuNames: [],
      userActionText: {
        editPassword: "修改密码",
        exit: "退出登录"
      },
      tableBar: {
        score: false,
        about: false,
        mine: false
      },
      showTableBar: true,
      showBack: false
      // menuList: [],
    };
  },
  created() {
    saveApp(this);
    this.ifLogin()
  },
  mounted() {
    this.$nextTick(() => {
      // console.info('app mounted', this.$route.path);
      this.pagePath = gFunc.pathArray(this.$route.path);
    });
  },
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
      this.pagePath = gFunc.pathArray(this.$route.path);
      this.switchPath(`/${this.pagePath[0]}`);
      console.log("watch route");
    },
    "userInfo.name": function(newVal) {
      console.log("new user");
      this.ifLogin();
    },
    pagePath: function(newVal) {
      switch (newVal[0]) {
        case "score":
          this.tableBar.score = true;
          this.tableBar.about = false;
          this.tableBar.mine = false;
          this.showBack = false;
          break;
        case "about":
          this.tableBar.score = false;
          this.tableBar.about = true;
          this.tableBar.mine = false;
          this.showBack = false;
          break;
        case "mine":
          this.tableBar.score = false;
          this.tableBar.about = false;
          this.tableBar.mine = true;
          this.showBack = false;
          break;

        default:
          break;
      }
      if(newVal.length > 1) {
        this.showBack = true
        this.showTableBar = false
      } else {
        this.showBack = false
        this.showTableBar = true
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user;
    }
  },

  methods: {
    switchMenuList() {
      this.showMenuList = !this.showMenuList;
    },
    goNewPassWord() {
      this.$router.push({ name: "newPassWord" });
    },
    switchPath(path) {
      // console.log('switchPath', path);
      let _index = null;
      this.showMenuList = false;

      this.switchIndicator(_index);
    },
    switchIndicator(index) {
      // //console.log('qwe',index);
      this.indicator = index;
    },
    ifLogin() {
      if (!this.$store.state.user.name) {
        if (!localStorage.getItem("token")) {
          // console.log('asd');
          this.$router.push({ path: "/login" });
          return false;
        } else {
          this.$store.commit("saveToken", {
            access_token: localStorage.getItem("token"),
            expires_in: localStorage.getItem("loginOverTime")
          });
          this.API.getMemberInfo()
            .then(result => {
              this.isLogin = true;
              this.$store.commit("saveUser", result.data);
              // this.$router.push({path: '/'})
            })
            .catch(err => {
              //console.log(err)
            });
        }
      } else {
        this.isLogin = true;
      }
    },
    goPersonal(name) {
      // if (!this.userInfo.permissions.show_project_data) {
      //   notification.error({
      //     message: 'error',
      //     description: '没有权限，请联系管理员'
      //   });
      //   return
      // }
      if (this.userInfo.id) {
        this.$router.push({
          path: "/dashboard/personal",
          query: { id: this.userInfo.id }
        });
      }
    },
    viewTitle(){
      let _title = ''
      switch (this.pagePath[this.pagePath.length - 1]) {
        case 'score':
          _title = '2019年360度考核'
          break;
      
        default:
          _title = this.pathMap[this.pagePath[this.pagePath.length - 1]]
          break;
      }
      return _title
    },
    goBack() {
      this.$router.go(-1)
    },
    exitLogin() {
      this.isLogin = false;
      this.$store.commit("clearLogin");
      localStorage.clear();
      setTimeout(() => {
        this.$router.push({ path: "/login" });
      }, 100);
    }
  }
};
</script>
